<template>
  <div class="section">
    <div class="bannner_1 banner">
      <img src="../assets/banner1.jpg" alt />
    </div>
    <div class="bannner_2 banner">
      <div class="videoArea">
        <video id="myVideo" class="video-js">
          <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
        </video>
      </div>
      <img src="../assets/banner2.jpg" alt />
    </div>
    <div class="bannner_3 banner">
      <img src="../assets/banner3.jpg" alt />
    </div>
    <div class="bannner_4 banner">
      <img src="../assets/banner4.jpg" alt @click="buyMember" />
    </div>
  </div>
</template>

<script>
import getUrlParams from '../js/getUrlParams.js'
export default {
  data() {
    return {
      token: ''
    }
  },
  created() {
    var token = getUrlParams('token')
    this.token = token;
    console.log(token);
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    // 初始化视频
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        // autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息
        //设置视频播放器的显示宽度（以像素为单位）
        // width: "375px",
        //设置视频播放器的显示高度（以像素为单位）
        // height: "200px"
      });
    },
    gainActiveTime() {
      this.axios({
        method: 'post',
        url: this.api + '/api/public/learn/banner_time'
      }).then(res => {
        // console.log(res)
        if (res.data.code == 1) {
          window.location.href = "http://test.lxyedu.com/memberOpen/appPay/index.html#/member?token=" + this.token
        } else if (res.data.code == -1) {
          alert(res.data.msg);
        }
      })
    },
    buyMember() {
      this.gainActiveTime();
    }
  }
}
</script>

<style scope>
.banner {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.banner img {
  width: 100%;
  vertical-align: middle;
}

.bannner_2 {
  position: relative;
  width: 100%;
}

.bannner_2 .videoArea {
  position: absolute;
  width: 80%;
  height: 70%;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  /* background: red; */
  z-index: 1;
}

.myVideo-dimensions {
  width: 100%;
  height: 100%;
  outline: none;
}

video {
  outline: none;
}

button {
  outline: none;
}
</style>